import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/base/base/widget.dart';
import 'package:flutter_demo/pages/container/page_view_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class TabBarPage extends PageWithTitle {
  const TabBarPage({super.key}) : super("标签栏(TabBar)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("标签栏组件，与Android TabLayout类似，常用于多个分类页面的顶部标签导航"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("TabBar"),
      NoticeText("标签栏常用于分类页面导航的场景，位置常常位于标题栏下方与分页组件上方，"
          "AppBar组件提供了bottom属性，可以用来放置标签栏"),
      NoticeText("有些场景需要多级标签栏，通过TabBar.secondary可以创建一个次级样式的标签栏"),
      PrimaryHeaderLabelText(
        "tabs",
        "标签栏选项卡列表，可以自己构建组件，如果是需要上方图标下方文本的选项卡可以直接用Tab组件",
      ),
      PrimaryHeaderLabelText(
        "controller",
        "标签控制器，可以设置与监听当前标签页的切换，也可以动画的形式过渡到目标页面，需提供一个"
            "Ticker给他驱动动画",
      ),
      PrimaryHeaderLabelText(
        "isScrollable",
        "标签栏是否可以滚动，默认为false，选项卡会按权重均匀分布，适用于小屏设备。在大屏设备或"
            "存在大量选项卡时可以设置为true以获得更好的体验效果",
      ),
      PrimaryHeaderLabelText(
        "tabAlignment",
        "选项卡对齐效果，在标签栏可滚动下可以配置对齐方向，不配置的话默认居中",
      ),
      CategoryTitle("指示器"),
      PrimaryHeaderLabelText(
        "indicatorColor",
        "指示器颜色",
      ),
      PrimaryHeaderLabelText(
        "indicatorWeight",
        "指示器高度",
      ),
      PrimaryHeaderLabelText(
        "indicatorPadding",
        "指示器边距",
      ),
      PrimaryHeaderLabelText(
        "indicator",
        "自定义指示器",
      ),
      PrimaryHeaderLabelText(
        "indicatorSize",
        "指示器尺寸类型",
        "    - tab 铺满选项卡组件",
        "    - label 与文本等宽",
      ),
      PrimaryHeaderLabelText(
        "dividerColor",
        "底部间隔线颜色",
      ),
      PrimaryHeaderLabelText(
        "dividerHeight",
        "底部间隔线高度",
      ),
      CategoryTitle("选项卡样式"),
      PrimaryHeaderLabelText(
        "labelStyle unselectedLabelStyle",
        "标签颜色",
      ),
      PrimaryHeaderLabelText(
        "labelColor unselectedLabelColor",
        "标签颜色，优先级高可覆盖labelStyle指定的颜色",
      ),
      PrimaryHeaderLabelText(
        "labelPadding",
        "标签边距",
      ),
      CategoryTitle("交互"),
      PrimaryHeaderLabelText(
        "overlayColor",
        "按压图层颜色",
      ),
      PrimaryHeaderLabelText(
        "splashFactory splashBorderRadius",
        "按压图层样式",
      ),
      PrimaryHeaderLabelText(
        "enableFeedback",
        "启用原生平台的点击反馈",
      ),
      AppSpacer.large,
      UlItem("Tab"),
      BodyText("选项卡组件，用于构建带图标和文本（Column布局）选项卡，不过这种一般用于APP底部"
          "导航"),
      AppSpacer.large,
      UlItem("TabBarView"),
      BodyText("标签栏视图，与TabBar联动的分页视图，实现多页面切换浏览"),
      NoticeText("Flutter基于PageView封装与TabBar联动的组件，通过传入TabController实现"
          "与PageView的状态同步"),
      PageLink(PageViewPage()),
    ];
  }
}

class _Example extends StatefulWidget {
  const _Example();

  @override
  State<StatefulWidget> createState() {
    return _ExampleState();
  }
}

class _ExampleState extends State<_Example>
    with SingleTickerProviderStateMixin {
  final pageSizes = 3;
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: pageSizes, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TabBar(
          controller: _tabController,
          tabs: List.generate(
            pageSizes,
            (index) => Text("Page $index"),
          ),
          isScrollable: true,
          tabAlignment: TabAlignment.start,
          // indicatorColor: Colors.orange,
          // automaticIndicatorColorAdjustment: false,
          indicatorWeight: 2,
          dividerHeight: 1,
          // splashFactory: InkSplash.splashFactory,
          // splashFactory: InkRipple.splashFactory,
          // splashBorderRadius: const BorderRadius.all(Radius.circular(60)),
        ),
        AppSpacer.mini,
        SizedBox(
          height: 200,
          child: TabBarView(
            controller: _tabController,
            children: List.generate(
              pageSizes,
              (index) {
                return ColoredBox(
                    color: switch (index) {
                  0 => Colors.red,
                  1 => Colors.green,
                  _ => Colors.blue,
                });
              },
            ),
          ),
        )
      ],
    );
  }
}
